<template>
  <view class="content">
    <!-- 景点选择 -->
    <view class="attractionSelect">
      景点：
      <view class="selectColumn">
        <uni-data-select v-model="selectValue" :localdata="scenicList" @change="changeSelect"></uni-data-select>
      </view>
    </view>
    <!-- 未解锁任务 -->
    <view class="notUnlockList">
      <view class="listTitle">
        未解锁任务
      </view>
      <view v-for="(item,index) in notTaskList" :key="index" class="taskItem">
        <view v-if="item.type<1" class="typeTag">
          行为
        </view>
        <view v-if="item.type === 1" class="typeTag">
          单选
        </view>
        <view v-if="item.type === 2" class="typeTag">
          多选
        </view>
        <view v-if="item.type === 3" class="typeTag">
          判断
        </view>
        <view v-if="item.type === 4" class="typeTag">
          填空
        </view>
        <view class="taskTitle">
          {{ item.title }}
        </view>
        <view class="optView">
          <view class="select" @tap="selectTask(item)">
            查看
          </view>
          |
          <view class="unlocked" @tap="unlockTask(item)">解锁</view>
        </view>
      </view>
      <view v-if="notTaskList.length === 0" style="margin: 0 auto; margin-top: 20rpx; color: darkgray;">
        暂无数据,点击上方按钮可切换景点查看
      </view>
    </view>
    <!-- 已解锁任务 -->
    <view class="unlockedList">
      <view class="unLockedListTitle">
        已解锁任务
      </view>
      <view v-for="(item,index) in taskList" :key="index" class="taskItemUnlocked">
        <view v-if="item.type<1" class="unlockedTag">
          行为
        </view>
        <view v-if="item.type === 1" class="unlockedTag">
          单选
        </view>
        <view v-if="item.type === 2" class="unlockedTag">
          多选
        </view>
        <view v-if="item.type === 3" class="unlockedTag">
          判断
        </view>
        <view v-if="item.type === 4" class="unlockedTag">
          填空
        </view>
        <view class="taskTitle">
          {{ item.title }}
        </view>
        <view class="optView">
          <view class="select" @tap="selectTask(item)">
            查看
          </view>
        </view>
      </view>
      <view v-if="taskList.length === 0" style="margin: 0 auto; margin-top: 20rpx; color: darkgray;">
        暂无数据,点击上方按钮可切换景点查看
      </view>
    </view>
    <!-- 一键解锁全部 -->
    <view class="unlockAll" @tap="unlockTaskAll()">
      一键解锁全部
    </view>
    <!-- 行为类 -->
    <tui-modal :show="behaviorModal" custom maskClosable padding="10" radius="15"
               @cancel="this.behaviorModal = false">
      <view class="behaviorModal">
        <view class="title">
          {{ taskDetail.title || taskDetail.introduce }}
        </view>
        <view class="introduce">
          {{ taskDetail.introduce }}
        </view>
        <view class="taskImg">
          <image :src="taskDetail.img" mode="widthFix"></image>
        </view>
      </view>
    </tui-modal>
    <!-- 问答类 -->
    <tui-modal :show="essayModal" custom maskClosable padding="10" radius="15" @cancel="this.essayModal = false">
      <view class="essayModal">
        <view class="title">
          {{ taskDetail.title }}
        </view>
        <view class="optList">
          <view class="optItem">

          </view>
        </view>
        <view class="taskDesc">
          解析：
        </view>
      </view>
    </tui-modal>

  </view>
</template>

<script>
import {
  getSenicTask,
  taskUnlock,
  taskDetail
} from '@/api/tourplan.js'

export default {
  data() {
    return {
      loadingTips: false, //数据加载控制
      selectValue: 0,
      notTaskList: [], //未解锁任务列表

      taskList: [], //已解锁任务列表
      scenicList: [],
      itineraryId: 0,
      taskDetail: {},
      behaviorModal: false,
      essayModal: false
    }
  },
  onLoad(options) {
    const that = this
    that.itineraryId = options.itineraryId
    that.initData(options)
  },
  methods: {

    //初始化数据
    initData(options) {
      const that = this
      const dataJSON = JSON.parse(decodeURIComponent(options.scenic))
      that.scenicList = this.initSenicData(dataJSON);
      that.selectValue = that.scenicList[0].value
      that.getScenicTaskList()
    },

    //获取当前景点的任务列表
    getScenicTaskList() {
      const that = this
      getSenicTask({
        itineraryId: that.itineraryId,
        scenicId: that.selectValue,
        tel: uni.getStorageSync('userinfo').phone
      }).then(res => {
        that.notTaskList = res.locked
        that.taskList = res.unlocked
        console.log(that.taskList)
        console.log(that.taskList.length)
      }).catch(err => {
        uni.showToast({
          title: err,
          icon: 'none',
          duration: 3000
        })
      })
    },

    //景点选择
    changeSelect(e) {
      const that = this
      that.selectValue = e
      getSenicTask({
        itineraryId: that.itineraryId,
        scenicId: that.selectValue,
        tel: uni.getStorageSync('userinfo').phone
      }).then(res => {
        that.notTaskList = res.locked
        that.taskList = res.unlocked
      }).catch(err => {
        uni.showToast({
          title: err,
          icon: 'none',
          duration: 3000
        })
      })


    },

    //查看任务详情
    selectTask(item) {
      taskDetail({
        taskId: item.id
      }).then(res => {
        this.taskDetail = res
      }).catch(err => {
        console.log(err)
      })
      if (item.type < 1) {
        this.behaviorModal = true
      } else {
        this.essayModal = true
      }
    },

    //解锁任务
    unlockTask(item) {
      const that = this
      const idList = []
      idList.push(item.id)
      taskUnlock({
        itineraryId: that.itineraryId,
        taskIds: idList,
        tel: uni.getStorageSync('userinfo').phone
      }).then(res => {
        that.getScenicTaskList()
        uni.showToast({
          title: '已解锁',
          icon: 'none',
          duration: 3000
        })
      })
    },

    //解锁全部任务
    unlockTaskAll() {
      const that = this
      const idList = that.notTaskList.map(item => item.id);
      console.log(idList);
      taskUnlock({
        itineraryId: that.itineraryId,
        taskIds: idList,
        tel: uni.getStorageSync('userinfo').phone
      }).then(res => {
        that.getScenicTaskList()
        uni.showToast({
          title: '已全部解锁',
          icon: 'none',
          duration: 3000
        })
      })
    },

    //重组景点数据
    initSenicData(list) {
      const newSenicList = list.map(list => ({
        value: list.id,
        text: list.name
      }))
      return newSenicList
    },

  }
}
</script>

<style>
@import url('taskManage.css');
</style>
